<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/goodslist.css">
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="top">
            <h1>商品列表</h1>
            <a href="../classify.html" class="iconfont icon-zuojiantou"></a>
        </div>
    </header>
    <!-- 主体区域 -->
    <div class="main" id="app">
        <!-- 搜索框 -->
        <div class="search">
            <div class="input">
                <span class="iconfont icon-sousuo"></span> 搜索商品
            </div>
            <i class="iconfont" :class="{'icon-pailie':iFlag,'icon-tubiao_liebiaopailie':!iFlag}" @click="iClick"></i>
        </div>
        <!-- 导航栏 -->
        <nav>
            <div v-for="(item,index) in navList" :class="{active:index===flag}" @click="navClick(index)">
                {{item}}
            </div>
            <div :class="{active:flag===2}" @click="priceClick">
                价格
                <span>
                    <i class="iconfont icon-xiangshang" :class="{activeI:flagI}"></i>
                    <i class="iconfont icon-xiangxia" :class="{activeI:!flagI}"></i>
                </span>
            </div>
        </nav>
        <!-- 商品区域 -->
        <div class="goods">
            <a v-for="item in goodsList" href="javascript:;" @click="gogogo(item.goods_id)">
                <div :class="{good:iFlag,goodOther:!iFlag}">
                    <div class="left">
                        <img :src="item.goods_image" alt="" />
                    </div>
                    <div class="right">
                        <div class="top">
                            <p>{{item.goods_name}} </p>
                            <span v-show="iFlag">
                                已售{{item.goods_sales}}件
                            </span>
                        </div>
                        <div class="bottom">
                            <i>¥{{item.goods_price_max}}</i>
                            <span v-if="item.line_price_max>0">¥{{item.line_price_max}}</span>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="./js/goodslist.js"></script>
</body>

</html>